<template>
    <Modal v-if="enabled" v-model="enabled" fullscreen footer-hide :mask="false" :title="$t('UI设计')+'-'+scene.name"
        :width="width">
        <Row>
            <Col span="4">
            <h3 style="border-bottom: 1px solid rgb(220, 222, 226);height:35.8px;padding-top:8px;padding-left:20px;">
                {{$t('大纲')}}</h3>

            <Tree :data="page" @on-contextmenu="handleContextMenu" :render="renderContent"
                @on-select-change="selectChanged">
                <template #contextMenu>
                    <DropdownItem @click="handleContextMenuEdit">编辑</DropdownItem>
                    <DropdownItem @click="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
                </template>
            </Tree>
            </Col>
            <Col span="4">
            <h3 style="border-bottom: 1px solid rgb(220, 222, 226);height:35.8px;padding-top:8px;padding-left:20px;">
                {{$t('模拟数据')}}</h3>
            </Col>
            <Col :span="isLandscape?16:12">
            <h3 style="border-bottom: 1px solid rgb(220, 222, 226);height:35.8px;padding-top:8px;padding-left:20px;">
                {{$t('预览')}}</h3>
            <div style="padding:5px;">
                <span @click="rotated=!rotated">
                    <Icon v-if="isLandscape" type="md-tablet-landscape" />
                    <Icon v-else type="md-tablet-portrait" />
                </span>
                {{$t('宽')}}
                <InputNumber size="small" style="width:100px" v-model="previewWidth" :min="300" :max="3000" :step="50"
                    controls-outside :precision="0" />
                {{$t('高')}}
                <InputNumber size="small" style="width:100px" v-model="previewHeight" :min="300" :max="3000" :step="50"
                    controls-outside :precision="0" />
                <Dropdown style="margin-left: 20px" trigger="click">
                    <a href="javascript:void(0)">
                        预置
                        <Icon type="ios-arrow-down"></Icon>
                    </a>
                    <template #list>
                        <DropdownMenu>
                            <DropdownItem v-for="screen in predefinedScreen" @click="setScreen(screen)">
                                {{screen.name}}({{screen.width}} × {{screen.height}})</DropdownItem>
                        </DropdownMenu>
                    </template>
                </Dropdown>
                {{$t('缩放')}}
                <InputNumber size="small" style="width:100px" v-model="previewScale" :min="0.01" :max="3" :step="0.03"
                    controls-outside :precision="2" />
            </div>
            <div :style="previewWrapperStyle">
                <div :style="previewStyle">
                    <UIBuilderRT :page="page"></UIBuilderRT>
                </div>
            </div>
            <div v-if="isLandscape">
                <h3
                    style="border-bottom: 1px solid rgb(220, 222, 226);height:35.8px;padding-top:8px;padding-left:20px;">
                    {{$t('属性')}}</h3>
            </div>
            </Col>
            <Col v-if="!isLandscape" span="4">
            <h3 style="border-bottom: 1px solid rgb(220, 222, 226);height:35.8px;padding-top:8px;padding-left:20px;">
                {{$t('属性')}}</h3>
            </Col>
        </Row>
    </Modal>
</template>